<template>
  <div class="home">
	<header>
		<Header></Header>
		<ly-tab
		    v-model="selectedId"
		    :items="items"
		    :options="options"
			@change='changeTab'
		>
		</ly-tab>
	</header>
	<section ref='wrapper'>
		<div>
			<div 
				v-for='(item,index) in newData'
				:key='index'
			>
				<Swiper 
					v-if='item.type=="swiperList"'
					:list='item.data'
				></Swiper>
				
				<Icons 
					v-if='item.type=="iconsList"'
					:list='item.data'
				></Icons>
				
				<Like 
					v-if='item.type=="likeList"'
					:list='item.data'
				></Like>
			</div>
		</div>
	</section>
	<Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from '@/components/common/Tabbar.vue'
import Header from '@/components/home/Header.vue'
import Swiper from '@/components/home/Swiper.vue'
import Icons from '@/components/home/Icons.vue'
import Like from '@/components/home/Like.vue'
import BetterScroll from 'better-scroll'
import http from '@/common/api/request.js'
export default{
	data () {
	    return {
			lBetterScroll:'',
			rBetterScroll:'',
			selectedId: 0,
			items: [],
			newData:[],
			options: {
				activeColor: '#b0352f'
			}
	    }
	},
	components:{
		Tabbar,
		Header,
		Swiper,
		Icons,
		Like
	},
	created(){
		this.getData();
	},
	methods:{
		async getData(){
			
			let res = await http.$axios(  {
				url:'/api/index_list/0/data/1'
			})
			
			this.items = Object.freeze(res.topBar);
			this.newData = Object.freeze(res.data);
				
			//等你dom都加载完成了，执行函数体内代码
			this.$nextTick(()=>{
				this.BetterScroll =new BetterScroll(this.$refs.wrapper, {
				  movable: true,
				  zoom: true,
				  bounce: false,
                  click:true
				})
			})
		},
		async addData( index ){
			
			let res = await http.$axios(  {
				url:'/api/index_list/'+index+'/data/1'
			})
			
			if( res.constructor == Array ){
				this.newData = Object.freeze(res);
			}else{
				this.newData = Object.freeze(res.data);
			}
			
			//等你dom都加载完成了，执行函数体内代码
			this.$nextTick(()=>{
				this.rBetterScroll = new BetterScroll(this.$refs.wrapper, {
				  movable: true,
				  zoom: true,
				  bounce: false,
                  click:true
				})
			})
		},
		changeTab( item ,index ){
			this.addData( index  );
		}
	}
}
</script>
<style scoped lang='scss'>
.home{
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
header{
	width: 100%;
	height: 2.4rem;
}
section{
	flex:1;
	overflow: hidden;
}
::v-deep .ly-tabbar{
	box-shadow: none;
}
</style>